<!-- 博客详情页 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/content.css">
</head>

<body>
    <!-- 1. 导航栏 -->
    <div class="nav">
        <img src="../img/logo.png" alt="图片加载失败">
        <span>我的博客系统</span>
        <!-- 因为有一段距离，所以用一个 span 进行占位 -->
        <span class="space"></span>
        <a href="./blog_list.html">主页</a>
        <a href="./blog_edit.html">写博客</a>
        <a href="https://baidu.com/">注销</a>
    </div>

    <!-- 2. 个人信息 和 博客列表 -->
    <div class="container">
        <div class="container-left">
            <!-- 个人信息 -->
            <div class="card">
                <img src="../img/card.png" alt="图片加载失败">
                <h3>bingo</h3>
                <a href="https://blog.csdn.net/weixin_64423718?spm=1000.2115.3001.5343">bingo691</a>

                <div class="counter">
                    <span>文章</span>
                    <span>数量</span>
                </div>

                <div class="counter">
                    <span>1</span>
                    <span>2</span>
                </div>
            </div>
        </div>
        <div class="container-right">
            <!-- 博客列表 -->
            <div class="blog">
                <!-- 第一篇博客 -->
                <div class="title">
                    这是一篇博客
                </div>
                <div class="date">
                    2024-11-18
                </div>
                <!-- 详细信息 -->
                <div class="desc">
                    <p>
                        这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.
                    </p>
                    <p>
                        这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.
                    </p>
                    <p>
                        这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.
                    </p>
                    <p>
                        这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.这是博客信息Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Atque beatae ipsa soluta natus repellendus quas expedita praesentium minus,
                        tempora libero quae dolor consectetur neque dolorem excepturi,
                        minima quos! Magnam, doloribus.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>